import { useEffect, useState, useRef, useMemo } from 'react';
import { Button, Row, Col, Space, Skeleton } from 'antd';
import loadable from '@loadable/component';
import { useNavigate } from 'react-router-dom';

import useAuthAction from '@/hooks/useAuthAction';
import { getKeyFromUrl } from '@/utils';
import { getWorkInfo, getRoleInfo } from '@/service/api';
import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));
const Carousel = loadable(() => import('./components/Carousel'), {fallback: <Skeleton style={{padding:12}} active/>});
const WorkTabs = loadable(() => import('./components/Tabs'), {fallback: <Skeleton style={{padding:6}} active/>});
const ActionButton = loadable(() => import('@/pages/components/ActionButton'), {fallback: <Skeleton.Input style={{padding:6}} active />});

export default props => {
    const initState = () => ({
        objectInfo: {},
    });
    const [state, setState] = useState(initState);
    const navigate = useNavigate();
    const withAuth = useAuthAction();
    const isMobile = useDevice() === DEVICES.MOBILE;
    const id = getKeyFromUrl('id');

    // 请求详情数据
    const initData = async () => {
        const [res, err] = await getWorkInfo({ id }) || [];
        if(err) return;
        setState({ objectInfo: res?.data || {} });
    };

    // 轮播图片数据
    const carouselInfo = useMemo(() => {
        const reSort = true;
        const { objectInfo={} } = state;
        const { seriesImages='', mainSeriesImage='' } = objectInfo || {};
        let images = (seriesImages||'').split(',').filter(Boolean);
        let index = images.findIndex(img => img === mainSeriesImage);

        if(reSort) { // 需要重新排序
            images.splice(index, 1); // 移除掉一张
            images.unshift(mainSeriesImage); // 放到最前面
            index = 0;
        }

        return { images, index };
    }, [state.objectInfo]);

    useEffect(() => {
        initData();
    }, []);

    return (
        <>
            <div className={styles['container']}>
                <div className={styles['title-wraper']}>
                    <div className={styles['title-box']}>
                        <h1>{state.objectInfo?.seriesName || '--'}</h1>
                        <div className={styles['action-button']}>
                            <ActionButton dataSource={state.objectInfo} type="work"/>
                        </div>
                    </div>
                </div>

                <div className={styles['row']}>
                    <Row gutter={isMobile ? [12, 0] : [24, 24]} style={{ alignItems: 'stretch' }}>
                        <Col xs={24} sm={24} md={24} lg={15} xl={15} xxl={15}>
                            <div className={styles['panel']}>
                                <Carousel images={carouselInfo.images} index={carouselInfo.index} />
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={9} xl={9} xxl={9}>
                            <div className={`${styles['panel']} ${styles['info-container']}`}>
                                <div className={styles['info-box']}>
                                <div className={styles['info']}>
                                    <div className={styles['label']}>作者：</div>
                                    <div className={styles['value']}>
                                        {
                                            (state.objectInfo?.author||'').split(',').filter(Boolean).map((item, index) => {
                                                return <div key={index} className={styles['tag']}>{item}</div>
                                            })
                                        }
                                    </div>
                                </div>
                                <div className={styles['info']}>
                                    <div className={styles['label']}>参与创作：</div>
                                    <div className={styles['value']}>
                                        {
                                            (state.objectInfo?.contributingAuthor || '').split(',').filter(Boolean).map((item, index) => {
                                                return <div key={index} className={styles['tag']}>{item}</div>
                                            })
                                        }
                                    </div>
                                </div>
                                <div className={styles['info']}>
                                    <div className={styles['label']}>检索名称：</div>
                                    <div className={styles['value']}>
                                        {
                                            (state.objectInfo?.searchNames || []).map((item, index) => {
                                                return <div key={index} className={styles['tag']}>{item}</div>
                                            })
                                        }
                                    </div>
                                </div>
                                <div className={styles['info']}>
                                    <div className={styles['label']}>发行年份：</div>
                                    <div className={styles['value']}>{state.objectInfo?.publicationYear||''}</div>
                                </div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </div>
                
                <div className={styles['tabs-container']}>
                    <WorkTabs />
                </div>     
            </div>
        </>
    )
}
